<template>

	
<el-input
        v-model="Search"
        class="w-50 m-2"
        size="large"
        placeholder="客户名称"
        :suffix-icon="Search"
      />
	<el-button :icon="Plus" @click="showAddDialog()" type="plain">新增客房</el-button>
	<el-divider></el-divider>
	<el-table :data="tableData" style="width: 100%">
		<!-- <el-table-column prop="roomName" label="房号" /> -->
		<el-table-column prop="roomType" label="房间类型" />
		<el-table-column prop="roomStatus" label="状态" />
		<el-table-column prop="roomPrice" label="价格/天" />
		<el-table-column fixed="right" label="" width="120">
			<template #default="scope">
				<!--  -->
				<template v-if="currentUser.role">
					<el-button @click="modifyDialog.showDialog(toRaw(scope.row))" type="primary">修改</el-button>
					<el-popconfirm title="确认删除吗?" @confirm="handleDelete(scope.row)">
						<template #reference>
							<el-button type="danger">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
				<el-button v-else type="primary" size="large" @click="showDialog(scope.row)">
					预定
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<!-- 分页 -->
	<el-pagination @update:current-page="updateCurrentPage" @update:page-size="updatePageSize"
		layout="sizes, prev, pager, next, jumper" :page-size="pageSize" :page-count="pageCount"
		:current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :hide-on-single-page="false" />



	<!-- //预定表单 -->
	<el-dialog v-model="dialogFormVisible" title="房间预订">
		<el-form :model="form" label-width="140px">
			<el-form-item label="房间名">
				<el-input v-model="form.roomName" autocomplete="off" disabled />
			</el-form-item>

			<el-form-item label="房间类型">
				<el-input v-model="form.roomType" autocomplete="off" disabled />
			</el-form-item>

			<el-form-item label="房间价格">
				<el-input v-model="form.roomPrice" autocomplete="off" disabled />
			</el-form-item>

			<!-- 日期选择器 -->
			<el-form-item label="预定时间">
				<el-date-picker v-model="form.bookStarttime" type="daterange" range-separator="To"
					start-placeholder="Start date" end-placeholder="End date" value-format="YYYY-MM-DD" />
			</el-form-item>

			<el-form-item label="备注">
				<el-input v-model="form.roomRemark" autocomplete="off" />
			</el-form-item>


		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取消</el-button>
				<el-button type="primary" @click="book()">
					预定
				</el-button>
			</span>
		</template>
	</el-dialog>

	<modify-dialog ref="modifyDialog" :callback="getList" />
	<!-- 修改完数据之后getlist获取一次数据，刷新会使交互性变差 -->


	<!-- //新增房间表单 -->
	<el-dialog v-model="addFormVisible" title="新增房间">
		<el-form :model="addForm" label-width="140px">
			<el-form-item label="房间名">
				<el-input v-model="addForm.roomName" autocomplete="off" />
			</el-form-item>

			<el-form-item label="房间类型">
				<el-input v-model="addForm.roomType" autocomplete="off" />
			</el-form-item>

			<el-form-item label="房间价格">
				<el-input v-model="addForm.roomPrice" autocomplete="off" />
			</el-form-item>

			<!-- 日期选择器 -->
			<el-form-item label="预定时间">
				<el-date-picker v-model="addForm.bookStarttime" type="daterange" range-separator="To"
					start-placeholder="Start date" end-placeholder="End date" value-format="YYYY-MM-DD" />
			</el-form-item>

			<el-form-item label="备注">
				<el-input v-model="addForm.roomRemark" autocomplete="off" />
			</el-form-item>

		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="addSubmitRoom()">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>


</template>

<script setup lang="ts">

import { addRoom, selectRoom, selectRoomList, deleteRoom } from '@/api/index'
import type { RoomType } from '@/types/index'
import { onMounted, ref, reactive, toRaw } from 'vue'
import currentUserStore from '@/stores/currentUserStore'
import ModifyDialog from './components/ModifyDialog.vue'
import { Plus, Search } from '@element-plus/icons-vue';
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'

//分页配置
const pageSize = ref(10)
const pageCount = ref(1)
const currentPage = ref(1)
//获取到当前页面的改动，使之成为新值
const updateCurrentPage = (val: number) => {
	currentPage.value = val
	getList()
}
//获取到当前页面大小的改动，使之成为新值
const updatePageSize = (val: number) => {
	pageSize.value = val
	getList()
}


const modifyDialog = ref()
const currentUser = currentUserStore().currentUser

const getList = () => {
	// 获取到房间列表
	selectRoomList(currentPage.value, pageSize.value).then(((res: any) => {
		if (res.code == 200) {
			tableData.value = res.data.records
			pageCount.value = res.data.pages
		}
	}))
}

const tableData = ref<RoomType[]>()
//修改表单不可见
//ref使其成为响应式数据
//12行
const dialogFormVisible = ref(false)

const showDialog = (row: RoomType) => {
	dialogFormVisible.value = true
	//将此行的数据传入表单中
	form.roomName = row.roomName!
	//！断言row.roomName是非空数据
	form.roomPrice = row.roomPrice!
	form.roomType = row.roomType!
}

//对象一般使用reactive
//修改用的表单
const form = reactive({
	roomName: '',
	roomType: '',
	roomPrice: 0,
	bookStarttime: '',
	bookEndtime: '',
	roomRemark: '',

})

const book = () => {
	//计算顾客预定的天数与价格
	const date1 = dayjs(form.bookStarttime[0])
	const date2 = dayjs(form.bookStarttime[1])
	const bookday = date2.diff(date1, 'day')
	const totalPrice = form.roomPrice * bookday

}
const handleDelete = (room: RoomType) => {
	deleteRoom(room.roomId!).then((res: any) => {
		ElMessage.success(res.msg)
		getList()
	})
}
//新增房间表单可见性
const addFormVisible = ref(false)
//新增方法
const showAddDialog = () => {
	//弹出对话框之前先清空数据
	addForm.roomName = '',
		addForm.roomType = '',
		addForm.roomPrice = 0,
		addForm.bookStarttime = '',
		addForm.bookEndtime = '',
		addForm.roomRemark = '',

		addFormVisible.value = true
}
//新增方法
const addSubmitRoom = () => {
	addRoom(addForm).then((res: any) => {
		ElMessage.success(res.msg)
		addFormVisible.value = false
		getList()
	})

}
//新增用的表单
const addForm = reactive({
	roomName: '',
	roomType: '',
	roomPrice: 0,
	bookStarttime: '',
	bookEndtime: '',
	roomRemark: '',

})
//搜索框
const input = ref('')

onMounted(() => {
	getList()
})

</script>

<style lang="less" scoped>

</style>